<!--
 * @Author: your name
 * @Date: 2023-10-04 10:42:46
 * @LastEditTime: 2023-10-04 13:01:45
 * @LastEditors: DESKTOP-536UVPC
 * @Description: In User Settings Edit
 * @FilePath: \css-special-effects\简约登陆.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简约登陆</title>
</head>

<body>
    <div class="form">
        <div class="header">login</div>
        <div class="main">
            <div class="input-box">
                <input type="text" placeholder="username">
            </div>
            <div class="input-box">
                <input type="password" placeholder="password">
            </div>
        </div>
        <div class="action">
            <div class="btn">login</div>
            <div class="btn">register</div>
        </div>
    </div>
</body>
<style>
    body {
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0;
        background-color: #11171e;
    }

    /* 表单容器 */
    .form {
        width: 300px;
        background-color: rgba(41, 45, 62, 1);
        color: #fff;
        border-radius: 10px;
        padding: 50px 80px 80px;
        box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);
    }

    .header {
        text-align: center;
        font-size: 36px;
        text-transform: uppercase;
        line-height: 100px;
        user-select: none;
    }

    .input-box {
        /* 进行装饰 */
        background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
        background-size: 400%;
        width: 100%;
        height: 50px;
        margin-bottom: 20px;
        border-radius: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 1s;
    }

    .input-box input {
        color: #fff;
        background-color: rgba(41, 45, 62, 1);
        border: 0;
        width: calc(100% - 6px);
        height: calc(100% - 4px);
        border-radius: 30px;
        text-align: center;
        font-size: 16px;
        outline: none;
    }
    .action{
        display: flex;
    }
    .action .btn{
        flex: 1;
        text-transform: uppercase;
        border: 2px solid #0e92b3;
        text-align: center;
        line-height: 50px;
        border-radius: 30px;
        cursor: pointer;
        transition: all 1s;
        /* 禁止选中文本 */
        user-select: none;
    }
    .btn:nth-child(1){
        margin-right: 10px;
    }
    .btn:nth-child(2){
        margin-left: 10px;
    }
    .action .btn:hover{
        transform: scale(1.1);
        background-color: #0e92b3;
    }
    .action .btn:active{
        transform: scale(0.8);
        /* transition: all 1s; */
    }
    /* 聚焦和悬停 */
    .input-box:has(input:focus){
        animation: input-animate 5s linear infinite;
        transform: scale(1.1);
    }
    @keyframes input-animate{
        0%{
            background-position: 0 0;
        }
        100%{
            background-position: 400% 0;
        }
    }
</style>

</html>